import { Story, Canvas } from '@storybook/addon-docs';

# Remote Sorting

Remote/Server-side sorting via `sortServer` disables the internal sorting. It will be up to you to implement your own sort logic. A common use case is if you want to use remote sorting via an external API.

If you just want to replace the internal sort logic you should use [sortFunction](/docs/sorting-custom-sort--custom-sort).

For remote sorting you'll also want to set the `column` `sortField` to a value required by your API for that field.

```js
const columns = [
	{
		name: 'Title',
		selector: row => row.title,
		sortable: true,
		sortField: 'title',
	},
	{
		name: 'Director',
		selector: row => row.director,
		sortable: true,
		sortField: 'director',
	},
	{
		name: 'Year',
		selector: row => row.year,
		sortable: true,
		sortField: 'year',
	},
];

function MyComponent() {
	const [items, setData] = useState(data);

	const handleSort = async (column, sortDirection) => {
    /// reach out to some API and get new data using or sortField and sortDirection
    // e.g. https://api.github.com/search/repositories?q=blog&sort=${column.sortField}&order=${sortDirection}

	  setData(remoteData);
	};

	return (
		<DataTable
			columns={columns}
			data={items}
			onSort={handleSort}
			sortServer
		/>
	);
}
```

<Canvas>
  <Story id="sorting-remote-sort--remote-sort" />
</Canvas>